<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 条件注释：如果浏览器版本小于IE8就加载下面的文件 lt：小于 gt：大于 lte：小于等于 gte：大于等于 -->
    <!--[if lte IE 8]>
	<script src="./js/html5shiv.min.js"></script>
    <![endif]-->
    <title>TIM</title>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="qq_nav">
        <div class="wrapper">
            <a href="#" class="logo"></a>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">动态</a></li>
                </ul>
            </div>
            <div class="other">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">qq会员</a></li>
                    <li><a href="#">qq安全</a></li>
                </ul>

                <div class="register"><span>注册</span></div>
                <p>当前在线人数：227,763,015</p>
            </div>
        </div>
    </nav>
    <!-- 展示 -->
    <section class="qq_display">
        <img class="logo" src="./images/banner-logo.png" alt="">
        <img src="./images/banner-download.png" alt="">
        <img src="./images/banner-list.png" alt="">
        <img src="./images/banner-product.png" alt="">
        <!-- <img src="./images/banner-logo.png" alt=""> -->
    </section>
    <!-- 语音 -->
    <section class="qq_sound">
        <h1 class="text1">I'm QQ - 每一天，乐在沟通</h1>
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <div class="iphone">
            </div>
            <h1>沟通，是跨越<br>
                千山万水的亲切声音</h1>
            <p>无论何时何地，你都能自由享受QQ在各类<br>
                终端上带来的高清通话，与好友一起想聊多久聊多久</p>
        </div>
    </section>
    <!-- 文件 -->
    <section class="qq_file">
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <h1>沟通，是随时随地<br>
                爽快收发</h1>
            <p>通过QQ,电脑和手机上的文件都能收发自如，<br>
                更有手机在线查阅，轻松你的工作和生活。</p>
            <div class="mac"></div>
        </div>

    </section>
    <!-- 兴趣 -->
    <section class="qq_interestring">
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <h1>沟通，是志同道合<br>的他们放肆青春</h1>
            <p>即使世界很大，你也不会孤单，在兴趣部落<br>有和你一样的人，期待着和你一起发现精彩。</p>
            <div class="iphone"></div>
        </div>

    </section>
    <!-- 底部 -->
    <footer class="qq_footer">
        <div class="content">
            <div class="link">
               <a class="plmb" href="#" target="_blank">QQ 手机版</a>
               <a class="plpc" href="#" target="_blank">QQ PC版</a>
               <a class="plmac" href="#" target="_blank">QQ Mac版</a>
               <a class="plpad" href="#" target="_blank">QQ Pad版</a>

            </div>
            <p>Copyright © 1998- 2017 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>
    </footer>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.stellar.min.js"></script>
    <script>
    $(function(){
        $.stellar({
        horizontalScrolling: false,
        responsive: true
        });
    })
    </script>
</body>

</html>